<template>
  <div class="new-alert-container">
    <header class="header">
      <h1>新增提醒</h1>
      <button class="back-btn" @click="$router.go(-1)">
        <i class="fas fa-arrow-left"></i> 返回
      </button>
    </header>

    <main class="form-container">
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="title">提醒标题 *</label>
          <input
            type="text"
            id="title"
            v-model="alertData.title"
            required
            placeholder="输入提醒标题"
          >
        </div>

        <div class="form-group">
          <label for="content">提醒内容 *</label>
          <textarea
            id="content"
            v-model="alertData.content"
            required
            rows="5"
            placeholder="输入提醒内容"
          ></textarea>
        </div>

        <div class="form-group">
          <label for="time">提醒时间</label>
          <input
            type="datetime-local"
            id="time"
            v-model="alertData.scheduledTime"
          >
          <p class="form-hint">留空则立即发送提醒</p>
        </div>

        <div class="form-actions">
          <button type="button" class="cancel-btn" @click="$router.go(-1)">
            取消
          </button>
          <button type="submit" class="submit-btn">
            保存提醒
          </button>
        </div>
      </form>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAppStore } from '../store'
import { useRouter } from 'vue-router'

const store = useAppStore()
const router = useRouter()

// 初始化提醒数据
const alertData = ref({
  title: '',
  content: '',
  scheduledTime: ''
})

// 处理表单提交
const handleSubmit = () => {
  // 准备提交的数据
  const newAlert = {
    title: alertData.value.title,
    content: alertData.value.content,
    // 如果设置了定时时间，则添加
    ...(alertData.value.scheduledTime && {
      scheduledTime: new Date(alertData.value.scheduledTime).toISOString()
    })
  }

  // 调用store方法创建新提醒
  store.createNewAlert(newAlert)

  // 返回首页
  router.push('/')
}
</script>

<style scoped>
.new-alert-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #2c3e50;
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.back-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-container {
  flex: 1;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

form {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 600px;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #2c3e50;
}

input, textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.form-hint {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.cancel-btn, .submit-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.cancel-btn {
  background-color: #ecf0f1;
  color: #7f8c8d;
  border: none;
}

.cancel-btn:hover {
  background-color: #dcdde1;
}

.submit-btn {
  background-color: #2ecc71;
  color: white;
  border: none;
}

.submit-btn:hover {
  background-color: #27ae60;
}
</style>
